import type { DescItem } from '#/components/description';

import { DictEnum } from '@vben/constants';

import { Tag, Image } from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

import { renderDict } from '#/utils/render';

dayjs.extend(duration);
dayjs.extend(relativeTime);

function renderTags(list: string[]) {
  return (
    <div class="flex flex-row flex-wrap gap-0.5">
      {list.map((item) => (
        <Tag key={item}>{item}</Tag>
      ))}
    </div>
  );
}

// 在现有渲染函数后添加新的图片渲染函数
function renderImages(urls: string[]) {
  return (
    <div class="flex flex-wrap gap-2">
      {urls.map((url) => (
        <Image
          key={url}
          src={url}
          width={100}
          class="h-20 w-20 rounded border border-gray-200 object-cover"
        />
      ))}
    </div>
  );
}

export const descSchema: DescItem[] = [
  {
    field: 'todoType',
    label: '待办类型',
    render: (value) => renderDict(value, DictEnum.TO_DO_TYPE),
  },
  {
    field: 'submitterName',
    label: '提交人',
  },
  {
    field: 'approverName',
    label: '审核人',
  },
  {
    field: 'todoPersonName',
    label: '待办人',
  },
  {
    field: 'createTime',
    label: '提交时间',
    render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm'),
  },
  {
    field: 'followCustomerName',
    label: '回访客户',
    show: (value) => value?.todoType === '0',
  },
  {
    field: 'followType',
    label: '回访方式',
    render: (value) => renderDict(value, DictEnum.TODO_FOLLOW_UP_TYPE),
    show: (value) => value?.todoType === '0',
  },
  {
    field: 'todoDesc',
    label: '事项描述',
    show: (value) => [1, 2, 5].includes(Number(value?.followType)),
  },
  {
    field: 'todoStockGoodsName',
    label: '入库商品名称',
    show: (value) => value?.todoType === '1',
  },
  {
    field: 'todoStockNum',
    label: '入库数量',
    show: (value) => value?.todoType === '1',
  },
  {
    field: 'todoStockDeptDesc',
    label: '入库店铺名称',
    show: (value) => value?.todoType === '1',
  },
  {
    field: 'followMeetingLocation',
    label: '参会地点',
    show: (value) =>
      value?.todoType === '0' && [3, 4].includes(Number(value?.followType)),
  },
  {
    field: 'followMeetingTime',
    label: '参会时间',
    render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm'),
    show: (value) =>
      value?.todoType === '0' && [3, 4].includes(Number(value?.followType)),
  },
  {
    field: 'followMeetingInfo',
    label: '会议内容',
    show: (value) =>
      value?.todoType === '0' && [3, 4].includes(Number(value?.followType)),
  },
  {
    field: 'followMeetingGifts',
    label: '领取礼品',
    show: (value) => value?.todoType === '0',
  },
  {
    field: 'followMeetingLevel',
    label: '满意度',
    render: (value) => renderDict(value, DictEnum.CUSTOMER_SATISFACTION),
    show: (value) => value?.todoType === '0',
  },
  {
    field: 'todoFiles',
    label: '证明文件',
    render: (value) => renderImages(value),
  },
  {
    field: 'todoResult',
    label: '处理结果',
  },
  {
    field: 'todoCompletionTime',
    label: '处理时间',
    render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm'),
  },
  {
    field: 'remark',
    label: '备注',
  },
];
